<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Moving</title>
<style>
body { text-align:center; }
#viewport {
	text-align:left;
	width:600px;
	height:300px;
	background-color:#D6DFDA;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
#canvas {
	width:800px;
	height:500px;
	/*test*//*border: solid 2px green*/;
}
#canvas span {
	padding:8px;
	display:block;
}
#canvas span a {
	font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica;
	font-weight:bold;
	color:black;
	text-decoration:none;
}
#canvas span a:hover {
	color:white;
	text-decoration:none;
}
#msg {
	text-align:center;
	font-size:12px;
}
</style>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../../js/moving_canvas.js" type="text/javascript"></script>

<script>
Event.observe(window,'load',function(){
  new Moving(); 
});
</script>
</head>

<body>

<div id="viewport">
<div id="canvas">
<span style="font-size:32px">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='もちろん！（含：願望）'">
    JavaScriptはFlashを超えられるの？</a></span>
<span style="font-size:42px;text-align:right;margin-right:2em">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='もう少しかかりそうです・・'">
    それっていつくらいに？</a></span><br />
<span style="font-size:28px;margin-left:2em">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='ある意味。。'">
    Web2.0は素晴らしい未来なの？</a></span>
<span style="font-size:32px;text-align:right;margin-right:2em">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='サーバー側の事、気にしなくていいこと'">
    クラウドってなに？</a></span>
<span style="font-size:26px;margin-left:4em">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='多分、、相当に。'">
    ケータイでのWebってこれからもっと良くなるの？</a></span>
<span style="font-size:24px;text-align:right;margin-right:2em">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='だれでも無料で作れ、配布できること。'">
    JavaScriptで作る事のメリットは？</a></span>
<span style="font-size:26px;margin-left:2em">
    <a href="javascript:void(0)" onclick="$('msg').innerHTML='クライアントの大半はいけるかと。Googleを見て！'">
    JavaScriptで何でも出来るようになる？</a></span>
</div>
</div>
<div id="msg">マウスの移動に応じてスクロールします</div>

</body>
</html>
